<template>
  <div>
    <div class="mainPageBox">
      <div class="">
        <div class="equip-topnav bg">
          <div class="equip-topnav-left">
            <p v-if="name !== ''" class="equip-topnav-title colorin">{{ name }}</p>
            <p v-if="allnum !== ''" class="equip-topnav-num">
              总数
              <span class="colorin">{{ allnum }}</span>
            </p>
            <p v-if="inlinenum !== ''" class="equip-topnav-num">
              在线数
              <span class="span_num">{{ inlinenum }}</span>
            </p>
            <p v-if="equList.length === 0">查询暂无设备</p>
          </div>
          <!--      布局切换框-->
          <div class="equip-topnav-right">
            <p :class="changelayoutType == 1 ? 'pactive' : ''" @click="changelayout(1)">
              <i class="iconfont">&#xe6a2;</i>
            </p>
            <p :class="changelayoutType == 2 ? 'pactive' : ''" @click="changelayout(2)">
              <i class="iconfont">&#xe64c;</i>
            </p>
          </div>
        </div>
        <!--    列表-->
        <div class="app-container" v-if="changelayoutType == 1">
          <list-sequence :list="equList" :params="CompanyParams.param"></list-sequence>
        </div>
        <!--    平面图-->
        <div class="app-container" v-if="changelayoutType == 2">
          <plane-layout :list="equList"></plane-layout>
        </div>
      </div>
      <div class="loading_bg" v-if="isLoadingShow"></div>
    </div>
    <div>
      <!--    抽屉开关框-->
      <div
        class="venderOUTBOX"
        @click="showDrawer"
        :style="{ right: visible ? drawerWith + 10 + 'px' : '10px' }"
        v-if="roleId != 1 && changelayoutType == 1"
      >
        <i class="iconfont" v-if="!visible">&#xe66c;</i>
        <i class="iconfont" v-else>&#xe675;</i>
      </div>
      <!--    右边抽屉-->
      <a-drawer
        title="Basic Drawer"
        placement="right"
        :closable="false"
        :visible="visible"
        :after-visible-change="afterVisibleChange"
        :headerStyle="{ display: 'none' }"
        @close="onClose"
        :width="drawerWith + 'px'"
        :drawerStyle="{ position: 'relative' }"
      >
        <div>
          <div class="drawer-search">
            <div class="drawer-searchtitle flex flex-a-c flex-j-s-b">
              <span>选择机床厂</span>
              <a-button @click="handleSearch" type="primary">重置</a-button>
            </div>
            <a-form :form="form">
              <a-form-item>
                <a-input-search
                  v-model="CompanyParams.param"
                  placeholder="搜索"
                  @pressEnter="changeName"
                  @search="changeName"
                />
              </a-form-item>
              <a-form-item v-if="roleId == 3">
                <a-select
                  :getPopupContainer="(triggerNode) => triggerNode.parentNode"
                  v-model="CompanyParams.area"
                  allowClear
                  placeholder="选择片区"
                  @change="handleSelectChange"
                >
                  <a-select-option :value="item" v-for="(item, index) in array" :key="index">
                    {{ item }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-form>
          </div>
          <div class="venderul" v-if="venderList.length >= 0">
            <div
              class="venderli"
              v-for="(item, index) in venderList"
              :key="index + 1"
              @click="choseMacCompId(item, index)"
            >
              <div class="venderTitle" @click="openone(index + 1)">
                <a-icon :type="index + 1 == type ? 'up' : 'down'" />
                <img src="@images/ver.png" alt="" />
                <p class="venderonetitle">{{ item.macfacName }}</p>
                <p>{{ item.company.length }}</p>
              </div>
              <ul v-if="type == index + 1">
                <li
                  class="bt"
                  :class="{ compActive: checkValue === equ.compid }"
                  v-for="(equ, equindex) in item.company"
                  :key="equindex + 3"
                  @click.stop="choseCompany(equ, item)"
                >
                  <p>
                    <span class="eqname">名&emsp;&emsp;称:</span>
                    <span class="eqcontent colorin">{{ equ.name }}</span>
                  </p>
                  <p>
                    <span class="eqname">管理者:</span>
                    <span class="eqcontent colorin">{{ equ.manager }}</span>
                  </p>
                  <p>
                    <span class="eqname">联系方式:</span>
                    <span class="eqcontent colorin">{{ equ.phone }}</span>
                  </p>
                  <p>
                    <span class="eqname">地&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;址:</span>
                    <span class="eqcontent colorin">{{ equ.address }}</span>
                  </p>
                  <p>
                    <span class="eqname">机床数量:</span>
                    <span class="eqcontent colorin">
                      <a>{{ equ.runnum }}</a>
                      /{{ equ.macnum }}
                    </span>
                  </p>
                </li>
              </ul>
            </div>
          </div>
          <div v-if="venderList.length <= 0" style="font-size:15px;text-align: center;padding:20px" class="colorin">
            暂未搜索到关键字
          </div>
        </div>
      </a-drawer>
    </div>
  </div> 
</template>

<script>
import listSequence from './component/listSequence/listSequence.vue';
import planeLayout from './component/planeLayout/index';
import api from '@/api/equipment';
// let timer;
export default {
  name: 'equipmentList',
  components: {
    listSequence,
    planeLayout,
  },
  data() {
    return {
      array: [],
      visible: false,
      form: {},
      type: 0,
      name: '',
      venderList: [],
      equList: [],
      drawerWith: 430,
      macCompId: '',
      compid: 3, // 用户厂id
      userName: null,
      changelayoutType: 1,
      allnum: '',
      inlinenum: '',
      CompanyParams: {
        param: '',
        username: '',
      },
      searchshow: false,
      checkValue: 0,
      isLoadingShow: false,
    };
  },
  created() {
    let userInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.roleId = JSON.parse(localStorage.getItem('roleId'));
    this.CompanyParams.username = userInfo.username;
    this.userName = userInfo.username;
    if (this.roleId == 1) {
      //权限为1时没有厂家，直接查询机床厂组
      this.compid = localStorage.getItem('compid');
      this.getEquGroup();
    } else {
      let choseCompanyId = localStorage.getItem('choseCompanyId');
      let choseMacCompanyId = localStorage.getItem('choseMacCompanyId');
      let choseCompanyname = localStorage.getItem('choseCompanyname');
      if (choseCompanyId && choseCompanyname && choseMacCompanyId) {
        this.getList();
      } else {
        if (this.CompanyParams.area !== '') {
          this.getList();
        } else {
          this.getList(1);
        }
      }
    }
  },
  mounted() {
    this.getSecondDepartment('array');
    // clearInterval(timer);
    // timer = setInterval(()=>{}, 30000);
    // let choseCompanyId = localStorage.getItem('choseCompanyId');
    // let choseMacCompanyId = localStorage.getItem('choseMacCompanyId');
    // let choseCompanyname = localStorage.getItem('choseCompanyname');
    // if (choseCompanyId && choseCompanyname && choseMacCompanyId) {
    //   this.getList();
    // } else {
    //   if (this.CompanyParams.area !== '') {
    //     this.getList();
    //   } else {
    //     this.getList(1);
    //   }
    // }
  },
  // destroyed() {
  //   clearInterval(timer);
  // },
  methods: {
    changelayout(index) {
      this.changelayoutType = index;
    },
    choseMacCompId(item, index) {
      let { company, macfacid } = item;
      this.macCompId = item.macfacid;
      localStorage.setItem('choseMacCompanyId', item.macfacid);
      if (item.company.length > 0) {
        this.compid = item.company[0].compid;
        this.name = item.company[0].name;
        localStorage.setItem('choseCompanyname', item.company[0].name);
        localStorage.setItem('choseCompanyId', this.compid);
        this.allnum = item.company[0].macnum;
        this.inlinenum = item.company[0].runnum;
        let equnum = {
          allnum: this.allnum,
          inlinenum: this.inlinenum,
        };
        localStorage.setItem('equnum', equnum);
      }
      if (index + 1 == this.type) {
        this.getEquGroup();
        this.getCompanyOnLineNum({ companyLists: company, macFacId: macfacid });
      } else {
        this.checkValue = 0;
      }
    },
    choseCompany(item, macItem) {
      this.macCompId = macItem.macfacid;
      this.compid = item.compid;
      this.name = item.name;
      localStorage.setItem('choseMacCompanyId', macItem.macfacid);
      localStorage.setItem('choseCompanyname', item.name);
      localStorage.setItem('choseCompanyId', item.compid);
      this.allnum = item.macnum;
      this.inlinenum = item.runnum;
      let equnum = {
        allnum: this.allnum,
        inlinenum: this.inlinenum,
      };
      localStorage.setItem('equnum', equnum);

      this.getEquGroup();
      this.getCompanyOnLineNum({ companyLists: [item], macFacId: this.macCompId });
      this.checkValue = item.compid;
    },
    openone(index) {
      if (index == this.type) {
        this.type = 0;
      } else {
        this.type = index;
      }
    },
    changeName() {
      this.getList(1);
    },

    handleSelectChange(val) {
      this.CompanyParams.area = val;
      if (this.CompanyParams.area !== '') {
        this.getList();
      } else {
        this.getList(1);
      }
    },
    afterVisibleChange(val) {
      console.log('visible', val);
    },
    showDrawer() {
      this.visible = !this.visible;
      this.type = 0;
      this.checkValue = 0;
    },
    onClose() {
      this.visible = false;
    },
    getEquGroup() {
      this.isLoadingShow = true;
      let params = {
        macCompId: this.macCompId,
        Username: this.userName,
        compid: this.compid,
      };
      let choseCompanyname = localStorage.getItem('choseCompanyname');
      if (choseCompanyname) {
        this.name = choseCompanyname;
      }
      api.CompanyGroupList(params).then((res) => {
        this.isLoadingShow = false;
        this.equList = res.Data;
        let allnum = 0;
        let inlinenum = 0;
        this.equList.forEach((item) => {
          let inlinenumone = 0;
          let allnumonr = 0;
          let optlist = item.MacSNs;
          optlist.forEach((opt) => {
            allnumonr++;
            allnum++;
            if (opt.runstate && opt.runstate != 4000) {
              inlinenum++;
              inlinenumone++;
            }
          });
          item.inlinenumone = inlinenumone;
          item.allnumonr = allnumonr;
        });
        this.allnum = allnum;
        this.inlinenum = inlinenum;
      });
    },
    // 列表重置
    handleSearch() {
      this.CompanyParams.param = '';
      this.CompanyParams.area = '';
      this.checkValue = 0;
      this.getList(1);
    },
    // 获取列表
    async getList(arg) {
      // debugger
      this.type = 0;
      const res = await api.getCompanyList(this.CompanyParams);
      this.venderList = res.Data;
      if (res.Data.length > 0) {
        let choseCompanyId = localStorage.getItem('choseCompanyId');
        let choseMacCompanyId = localStorage.getItem('choseMacCompanyId');
        let choseCompanyname = localStorage.getItem('choseCompanyname');
        let company = this.venderList[0].company[0];
        // this.checkValue = company.compid;
        if (arg === 1) {
          this.macCompId = this.venderList[0].macfacid;
          this.compid = company.compid;
          this.name = company.name;
          this.allnum = company.macnum;
          this.inlinenum = company.runnum;
          let equnum = {
            allnum: this.allnum,
            inlinenum: this.inlinenum,
          };
          localStorage.setItem('equnum', equnum);
          localStorage.setItem('choseCompanyId', this.compid);
          localStorage.setItem('choseMacCompanyId', this.macCompId);
          localStorage.setItem('choseCompanyname', this.name);
          this.getEquGroup();
        } else {
          if (choseCompanyId) {
            this.compid = choseCompanyId;
          } else {
            this.compid = company.compid;
            localStorage.setItem('choseCompanyId', this.compid);
          }
          if (choseMacCompanyId) {
            this.macCompId = choseMacCompanyId;
          } else {
            this.macCompId = this.venderList[0].macfacid;
            localStorage.setItem('choseMacCompanyId', this.macCompId);
          }

          if (choseCompanyname) {
            this.name = choseCompanyname;
          } else {
            this.name = company.name;
            localStorage.setItem('choseCompanyname', this.name);
          }

          if (localStorage.getItem('equnum')) {
            let equnum = localStorage.getItem('equnum');
            this.allnum = equnum.allnum;
            this.inlinenum = equnum.inlinenum;
          } else {
            this.allnum = company.macnum;
            this.inlinenum = company.runnum;
            let equnum = {
              allnum: this.allnum,
              inlinenum: this.inlinenum,
            };
            localStorage.setItem('equnum', equnum);
          }
          this.getEquGroup();
        }
      } else {
        this.equList = [];
        this.name = '';
        this.allnum = '';
        this.inlinenum = '';
        this.getEquGroup();
      }
    },

    async getSecondDepartment(key) {
      const res = await api.getSecondDepartment({ parentDepartmentId: 1 });

      if (res.code != 200) {
        return;
      }

      this[key] = buildLists(res.data);

      function buildLists(lists) {
        let _lists = [];
        _lists = lists.map((item, index) => {
          let { id, department, ...rest } = item;
          return department;
        });
        return _lists;
      }
    },
    // 获取用户厂的在线数
    async getCompanyRunList(companyIds, companyLists) {
      const res = await api.getCompanyRunList(companyIds);
      if (res.MsgCode != 0) {
        return '';
      }

      let { counts } = res.Data;
      // let companies = Object.assign(this.selectCompanyLists, {});
      for (const key in counts) {
        if (Object.hasOwnProperty.call(counts, key)) {
          companyLists.forEach((item, index) => {
            let { compid } = item;
            if (compid == parseInt(key)) {
              companyLists[index].runnum = counts[key];
            }
          });
        }
      }
    },
    // 分组请求用户厂的在线数
    getCompanyOnLineNum({ companyLists, macFacId }) {
      let _this = this;
      let companyIds = [];
      companyLists.forEach((item) => {
        let { compid } = item;
        companyIds.push(compid);
      });
      // 分组请求数据
      group(companyIds, macFacId);
      function group(companyIds, macFacId) {
        let num = 10;
        let groups = Math.ceil(companyIds.length / num);
        for (let index = 0; index < groups; index++) {
          let ids = companyIds.slice(index * num, (index + 1) * num);
          _this.getCompanyRunList({ companyIds: ids, macFacId }, companyLists);
        }
      }
    },
  },
};
</script>

<style scoped lang="less">
@import 'index';
::v-deep .compActive {
  background: rgba(12, 36, 93, 0.2) !important;
}
</style>
